<template>
  <el-dialog
    v-model="visible"
    modal-class="zylbModal"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="zylbDialog"
    class="zylbDialog"
    :show-close="false"
    :width="width"
  >
    <template #header>
      <div class="my-header">
        <div class="title">
          <span style="color: white">{{ title }}</span>
        </div>
        <div style="cursor: pointer" @click="close">关闭</div>
      </div>
    </template>
    <el-table class="zylbTable" :highlight-current-row="false" :row-class-name="tableRowClassName" :data="tableData" style="width: 100%">
      <!-- @row-click="handleRowClick" -->
      <el-table-column prop="xm" label="姓名" />
      <el-table-column prop="xb" label="性别" />
      <el-table-column prop="lxfs" label="联系方式" />
      <el-table-column prop="xrzw" label="现任职务" />
      <el-table-column prop="fg" label="分工" />
    </el-table>
    <el-pagination
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      class="pagination"
      background
      layout="prev, pager, next"
      :total="pagination.total"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script lang="ts" setup>
const visible = ref(false);
interface Props {
  options: Array<DictDataOption>;
  value: number | string | Array<number | string>;
  title?: string;
  width?: string;
}
const emit = defineEmits(['onClose']);
const props = withDefaults(defineProps<Props>(), {
  title: '',
  width: '80%'
});
const tableData = ref([
  {
    xm: '张长慧',
    xb: '男',
    lxfs: '153XXXX9578',
    xrzw: '村党支部书记、村委会主任',
    fg: '主持村党支部、村委会全面工作、主管招商引资工作'
  },
  {
    xm: '张长慧',
    xb: '男',
    lxfs: '153XXXX9578',
    xrzw: '村党支部书记、村委会主任',
    fg: '主持村党支部、村委会全面工作、主管招商引资工作'
  },
  {
    xm: '张长慧',
    xb: '男',
    lxfs: '153XXXX9578',
    xrzw: '村党支部书记、村委会主任',
    fg: '主持村党支部、村委会全面工作、主管招商引资工作'
  }
]);
const open = async () => {
  visible.value = true;
};
interface User {
  xm: string;
  xb: string;
  lxfs: string;
  xrzw: String;
  fg: String;
}
const tableRowClassName = ({ row, rowIndex }: { row: User; rowIndex: number }) => {
  if (rowIndex % 2 == 0) {
    return 'js-row';
  } else {
    return 'sz-row';
  }
};
const pagination = ref<Record<string, any>>({
  pageNum: 1,
  pageSize: 10,
  total: 3
});
const handleCurrentChange = () => {};
const close = () => {
  visible.value = false;
  emit('onClose');
};
/**
 * 对外暴露子组件方法
 */
defineExpose({
  open
});
</script>

<style lang="scss" scoped>
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: white;
  // background: rgb(14, 60, 121);
  padding: 0px 15px;
  font-size: 18px;
  border-bottom: 1px solid rgb(19, 71, 131);
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    text-shadow: 0px 0px 9px #fff;
  }
}
.zylbTable,
::v-deep.el-table {
  background-color: transparent;
  thead,
  tr,
  th.el-table__cell {
    text-align: center;
    color: #91c5f6;
    padding: 0;
    background-color: #178af01a !important;
    border: 0px;
  }
  thead {
    th.el-table__cell {
      color: #cae9ff;
      background: rgba(23, 138, 240, 0.27) !important;
    }
  }

  .el-table__body {
    .el-table__cell {
      cursor: pointer !important;
      text-align: center;
      border-bottom: none;
    }
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent !important;
  }

  .el-table__inner-wrapper:before {
    background-color: transparent !important;
  }

  // tr.sz-row {
  //   background-color: #3d7e93 !important;

  //   &:hover {
  //     background-color: #3d7e93 !important;
  //   }
  // }
}
.el-pagination {
  margin: 14px 0;
  display: flex;
  justify-content: center;
}
</style>
<style lang="scss">
.zylbDialog.el-dialog {
  padding: 0px;
  background: linear-gradient(0deg, rgba(1, 26, 63, 1), rgba(1, 60, 150, 0.8));

  .el-dialog__header {
    padding: 0px !important;
    border-bottom: none !important;
  }

  .el-dialog__body {
    color: white;
  }
}

.zylbModal {
  background: rgba(0, 0, 0, 0.6);
}
</style>